---
import LinkButton from "@components/astro/UI/LinkButton.astro";
import "@styles/components.scss";
const { name, describtion, url ,index } = Astro.props;
---

<div class=`col-span-1`>
  <div
    class=`block rounded-lg random-gradient${index+1} p-6 text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700`
  >
    <h5 class="mb-2 text-xl font-medium leading-tight text-skin-blue">
      {name}
    </h5>
    <p class="mb-4 text-base text-skin-base">
      {describtion}
    </p>

    <LinkButton href={url} postion="left" className="link-button" title={name}>
      <button
        type="button"
        class="inline-block rounded bg-skin-card px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-te-ripple-init
        data-te-ripple-color="light"
        >跳转
      </button>
    </LinkButton>
  </div>
</div>
